import React from 'react';
import {Link} from 'react-router';
import {Icon, Message} from 'antd';
import config, {REG} from '../../config';
import {ADD_FAM_MEMBER, EDIT_FAM_MEMBER} from '../../constants/userTypes';
import {formatDate} from '../../utils';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';

/**
 * 加载样式或图片文件
 * */
import 'antd/lib/message/style/index.less';
import './sass/famInfo.scss';

class FamMan extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            name: '',
            gender: '',
            birthday: '',
            role: '',
            phone: ''
        };
    }

    componentDidMount() {
        const {location} = this.props;
        if (location.state) {
            this.setState({
                name: location.state.name,
                birthday: formatDate(location.state.birthday),
                // gender: location.state.gender,
                role: location.state.role,
                phone: location.state.phone
            });
        }

    }

    handleSubmit() {
        const {actions, location} = this.props;
        let name = this.state.name;
        let relation = this.state.role;
        let sex = this.state.gender;
        let birthday = new Date(this.state.birthday).getTime();
        let phone = this.state.phone;
        if (phone && !REG.phone.rule.test(phone)) {
            Message.warn(REG.phone.errMsg);
            return false;
        }
        if (!location.state) {
            actions.addFamMember(name, relation, sex, birthday, phone).then(res => {
                if (res.type === ADD_FAM_MEMBER) {
                    if (res.data.code === 20000) {
                        this.context.router.goBack();
                    } else {
                        Message.info(res.data.message);
                    }
                }
            });
        } else {
            actions.editFamMember(location.state.id, name, relation, sex, birthday, phone).then(res => {
                if (res.type === EDIT_FAM_MEMBER) {
                    if (res.data.code === 20000) {
                        this.context.router.goBack();
                    } else {
                        Message.info(res.data.message);
                    }
                }
            });
        }

    }

    render() {
        const {location, actions, user, home} = this.props;
        let isChild = parseInt(location.query.type) === 1;
        let memberArr = isChild
            ?
            Object.keys(config.FAM_MEMBER).filter(item => [101, 102].indexOf(parseInt(item)) > -1)
            :
            Object.keys(config.FAM_MEMBER).filter(item => [100, 103, 104, 105, 106, 107, 108].indexOf(parseInt(item)) > -1);
        let submitFlag =
            !!this.state.name && !!this.state.birthday && !!this.state.role &&
            ([101, 102].indexOf(parseInt(this.state.role)) > -1 ? true : !!this.state.phone);
        return (
            <MainSection className="fam-info" title={!!location.state ? '修改成员' : '添加成员'}>
                <div className="form">
                    <div className="form-group">
                        <div className="form-control">
                            <label htmlFor="name">姓名</label>
                            <input id="name" type="text"
                                   placeholder={isChild ? '请输入儿童姓名' : '请输入家长姓名'}
                                   value={this.state.name}
                                   onChange={e => this.setState({name: e.target.value})}/>
                        </div>
                        <div className="form-control">
                            <label htmlFor="phone">电话</label>
                            <input id="phone" type="number"
                                   value={this.state.phone}
                                   onChange={e => this.setState({phone: e.target.value})}
                                   placeholder={isChild ? '儿童可不填' : '请输入家长电话'}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="form-control">
                            <label htmlFor="role">{isChild ? '儿童性别' : '家庭身份'}</label>
                            <select id="role"
                                    value={this.state.role + ''}
                                    onChange={e => this.setState({role: e.target.value})}>
                                <option key={0} value=""></option>
                                {
                                    memberArr.map((item, index) => {
                                        return (
                                            // this.state.role == item ? (
                                            //     <option key={item} value={item}
                                            //             selected>{config.FAM_MEMBER[item]}</option>
                                            // ) : (
                                            <option key={index + 1} value={item}>{config.FAM_MEMBER[item]}</option>
                                            // )
                                        )
                                    })
                                }
                            </select>
                            <Icon type="right"/>
                        </div>
                        <div className="form-control">
                            <label htmlFor="birthday">出生年月</label>
                            <input id="birthday" type="date"
                                   placeholder="请选择"
                                   value={this.state.birthday}
                                   onChange={e => this.setState({birthday: e.target.value})}/>
                            <Icon type="right"/>
                        </div>
                    </div>


                </div>
                <button className={"submit " + (submitFlag ? '' : 'disabled')}
                        onClick={submitFlag ? this.handleSubmit : null}>确认
                </button>
            </MainSection>
        );
    }
}

export default FamMan;